เชี่ยวชาญการใช้ experimental_useSyncExternalStore ของ React: คู่มือฉบับสมบูรณ์

Hook experimental_useSyncExternalStore ของ React เป็นเครื่องมือที่ทรงพลังสำหรับการซิงโครไนซ์คอมโพเนนต์ React กับแหล่งข้อมูลภายนอก Hook นี้ช่วยให้คอมโพเนนต์สามารถติดตามการเปลี่ยนแปลงใน external store ได้อย่างมีประสิทธิภาพ และ re-render เฉพาะเมื่อจำเป็นเท่านั้น การทำความเข้าใจและการนำ experimental_useSyncExternalStore ไปใช้อย่างมีประสิทธิภาพเป็นสิ่งสำคัญสำหรับการสร้างแอปพลิเคชัน React ที่มีประสิทธิภาพสูง ซึ่งสามารถทำงานร่วมกับระบบจัดการข้อมูลภายนอกต่างๆ ได้อย่างราบรื่น

External Store คืออะไร?

ก่อนที่จะเจาะลึกรายละเอียดของ hook นี้ สิ่งสำคัญคือต้องนิยามว่า "external store" หมายถึงอะไร external store คือแหล่งเก็บข้อมูลหรือระบบการจัดการ state ใดๆ ที่อยู่นอก state ภายในของ React ซึ่งอาจรวมถึง:

• ไลบรารีการจัดการ State แบบ Global: Redux, Zustand, Jotai, Recoil
• Browser APIs: localStorage, sessionStorage, IndexedDB
• ไลบรารีสำหรับการดึงข้อมูล (Data Fetching): SWR, React Query
• แหล่งข้อมูลแบบเรียลไทม์: WebSockets, Server-Sent Events
• ไลบรารีของบุคคลที่สาม: ไลบรารีที่จัดการการตั้งค่าหรือข้อมูลนอก React component tree

การทำงานร่วมกับแหล่งข้อมูลภายนอกเหล่านี้อย่างมีประสิทธิภาพมักมีความท้าทาย การจัดการ state ในตัวของ React อาจไม่เพียงพอ และการติดตามการเปลี่ยนแปลงในแหล่งข้อมูลภายนอกเหล่านี้ด้วยตนเองอาจนำไปสู่ปัญหาด้านประสิทธิภาพและโค้ดที่ซับซ้อน experimental_useSyncExternalStore แก้ปัญหาเหล่านี้โดยการจัดเตรียมวิธีการที่เป็นมาตรฐานและปรับให้เหมาะสมที่สุดในการซิงโครไนซ์คอมโพเนนต์ React กับ external store

แนะนำ experimental_useSyncExternalStore

Hook experimental_useSyncExternalStore เป็นส่วนหนึ่งของคุณสมบัติทดลองของ React ซึ่งหมายความว่า API ของมันอาจมีการเปลี่ยนแปลงในอนาคต อย่างไรก็ตาม ฟังก์ชันหลักของมันตอบสนองความต้องการพื้นฐานในแอปพลิเคชัน React จำนวนมาก ทำให้มันคุ้มค่าที่จะทำความเข้าใจและทดลองใช้

รูปแบบพื้นฐานของ hook นี้มีดังนี้:

            const value = experimental_useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

            

              
                Copy
              
            
          

เรามาดูรายละเอียดของแต่ละ argument กัน:

• subscribe: (callback: () => void) => () => void: ฟังก์ชันนี้มีหน้าที่ติดตามการเปลี่ยนแปลงใน external store โดยจะรับ callback function เป็น argument ซึ่ง React จะเรียกใช้เมื่อ store มีการเปลี่ยนแปลง ฟังก์ชัน subscribe ควรคืนค่าเป็นฟังก์ชันอื่น ซึ่งเมื่อถูกเรียกใช้ จะยกเลิกการติดตาม callback จาก store ซึ่งเป็นสิ่งสำคัญเพื่อป้องกัน memory leaks
• getSnapshot: () => T: ฟังก์ชันนี้จะคืนค่า snapshot ของข้อมูลจาก external store React จะใช้ snapshot นี้เพื่อตรวจสอบว่าข้อมูลมีการเปลี่ยนแปลงจากการ render ครั้งล่าสุดหรือไม่ ฟังก์ชันนี้ต้องเป็น pure function (ไม่มี side effects)
• getServerSnapshot?: () => T (Optional): ฟังก์ชันนี้ใช้เฉพาะในระหว่างการทำ Server-Side Rendering (SSR) เท่านั้น โดยจะให้ snapshot เริ่มต้นของข้อมูลสำหรับ HTML ที่ถูก render ฝั่งเซิร์ฟเวอร์ หากไม่ได้ระบุไว้ React จะโยน error ระหว่างการทำ SSR ฟังก์ชันนี้ควรเป็น pure function เช่นกัน

Hook นี้จะคืนค่า snapshot ปัจจุบันของข้อมูลจาก external store ค่านี้รับประกันได้ว่าจะเป็นข้อมูลล่าสุดที่ตรงกับ external store เสมอเมื่อคอมโพเนนต์ทำการ render

ประโยชน์ของการใช้ experimental_useSyncExternalStore

การใช้ experimental_useSyncExternalStore มีข้อดีหลายประการเมื่อเทียบกับการจัดการการติดตาม external store ด้วยตนเอง:

• การเพิ่มประสิทธิภาพ (Performance Optimization): React สามารถตรวจสอบได้อย่างมีประสิทธิภาพว่าข้อมูลมีการเปลี่ยนแปลงเมื่อใดโดยการเปรียบเทียบ snapshots ซึ่งช่วยหลีกเลี่ยงการ re-render ที่ไม่จำเป็น
• การอัปเดตอัตโนมัติ: React จะทำการ subscribe และ unsubscribe จาก external store โดยอัตโนมัติ ทำให้ logic ของคอมโพเนนต์ง่ายขึ้นและป้องกัน memory leaks
• รองรับ SSR: ฟังก์ชัน getServerSnapshot ช่วยให้สามารถทำ Server-Side Rendering กับ external store ได้อย่างราบรื่น
• ความปลอดภัยในการทำงานพร้อมกัน (Concurrency Safety): Hook นี้ถูกออกแบบมาให้ทำงานได้อย่างถูกต้องกับคุณสมบัติ Concurrent Rendering ของ React ทำให้มั่นใจได้ว่าข้อมูลจะสอดคล้องกันเสมอ
• โค้ดที่ง่ายขึ้น: ลด boilerplate code ที่เกี่ยวข้องกับการ subscribe และอัปเดตด้วยตนเอง

ตัวอย่างการใช้งานจริงและกรณีศึกษา

เพื่อแสดงให้เห็นถึงพลังของ experimental_useSyncExternalStore เรามาดูตัวอย่างการใช้งานจริงหลายๆ แบบกัน

1. การผนวกรวมกับ Custom Store แบบง่าย

ก่อนอื่น มาสร้าง custom store แบบง่ายๆ ที่จัดการตัวนับกัน:

            // counterStore.js
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

            

              
                Copy
              
            
          

ตอนนี้ มาสร้างคอมโพเนนต์ React ที่ใช้ experimental_useSyncExternalStore เพื่อแสดงและอัปเดตตัวนับ:

            // CounterComponent.jsx
import React from 'react';
import { experimental_useSyncExternalStore } from 'react';
import counterStore from './counterStore';

function CounterComponent() {
  const count = experimental_useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getSnapshot
  );

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={counterStore.increment}>Increment</button>
    </div>
  );
}

export default CounterComponent;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ CounterComponent จะติดตามการเปลี่ยนแปลงใน counterStore โดยใช้ experimental_useSyncExternalStore เมื่อใดก็ตามที่ฟังก์ชัน increment ถูกเรียกใช้ใน store คอมโพเนนต์จะ re-render เพื่อแสดงค่าตัวนับที่อัปเดตแล้ว

2. การผนวกรวมกับ localStorage

localStorage เป็นวิธีที่นิยมใช้ในการเก็บข้อมูลถาวรในเบราว์เซอร์ มาดูกันว่าจะผนวกรวมมันกับ experimental_useSyncExternalStore ได้อย่างไร

            // localStorageStore.js
const localStorageStore = {
  subscribe: (listener) => {
    window.addEventListener('storage', listener);
    return () => {
      window.removeEventListener('storage', listener);
    };
  },
  getSnapshot: (key) => {
    try {
      return localStorage.getItem(key) || '';
    } catch (error) {
      console.error("Error accessing localStorage:", error);
      return '';
    }
  },
  setItem: (key, value) => {
    try {
      localStorage.setItem(key, value);
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  },
};

export default localStorageStore;

            

              
                Copy
              
            
          

ข้อสังเกตสำคัญเกี่ยวกับ `localStorage`:

• อีเวนต์ `storage` จะทำงานเฉพาะใน context อื่นๆ ของเบราว์เซอร์ (เช่น แท็บอื่น, หน้าต่างอื่น) ที่เข้าถึง origin เดียวกันเท่านั้น ภายในแท็บเดียวกัน คุณต้อง dispatch อีเวนต์นี้ด้วยตนเองหลังจากตั้งค่า item แล้ว
• `localStorage` อาจโยน error ได้ (เช่น เมื่อพื้นที่เก็บข้อมูลเต็ม) ดังนั้นจึงสำคัญอย่างยิ่งที่จะต้องครอบการทำงานด้วย `try...catch` blocks

ตอนนี้ มาสร้างคอมโพเนนต์ React ที่ใช้ store นี้กัน:

            // LocalStorageComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import localStorageStore from './localStorageStore';

function LocalStorageComponent({ key }) {
  const [inputValue, setInputValue] = useState('');
  const storedValue = experimental_useSyncExternalStore(
    localStorageStore.subscribe,
    () => localStorageStore.getSnapshot(key)
  );

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSave = () => {
    localStorageStore.setItem(key, inputValue);
  };

  return (
    <div>
      <label>Value for key "{key}":</label>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button onClick={handleSave}>Save to LocalStorage</button>
      <p>Stored Value: {storedValue}</p>
    </div>
  );
}

export default LocalStorageComponent;

            

              
                Copy
              
            
          

คอมโพเนนต์นี้ช่วยให้ผู้ใช้สามารถป้อนข้อความ บันทึกลงใน localStorage และแสดงค่าที่เก็บไว้ Hook experimental_useSyncExternalStore ทำให้แน่ใจว่าคอมโพเนนต์จะแสดงค่าล่าสุดใน localStorage เสมอ แม้ว่าจะมีการอัปเดตจากแท็บหรือหน้าต่างอื่นก็ตาม

3. การผนวกรวมกับไลบรารีการจัดการ State แบบ Global (Zustand)

สำหรับแอปพลิเคชันที่ซับซ้อนมากขึ้น คุณอาจใช้ไลบรารีการจัดการ state แบบ global เช่น Zustand นี่คือวิธีการผนวกรวม Zustand กับ experimental_useSyncExternalStore

            // zustandStore.js
import { create } from 'zustand';

const useZustandStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) =>
    set((state) => ({ items: state.items.filter((item) => item.id !== itemId) })),
}));

export default useZustandStore;

            

              
                Copy
              
            
          

ตอนนี้สร้างคอมโพเนนต์ React:

            // ZustandComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import useZustandStore from './zustandStore';
import { v4 as uuidv4 } from 'uuid';

function ZustandComponent() {
  const [itemName, setItemName] = useState('');
  const items = experimental_useSyncExternalStore(
    useZustandStore.subscribe,
    useZustandStore.getState
  ).items;

  const handleAddItem = () => {
    if (itemName.trim() !== '') {
      useZustandStore.getState().addItem({ id: uuidv4(), name: itemName });
      setItemName('');
    }
  };

  const handleRemoveItem = (itemId) => {
    useZustandStore.getState().removeItem(itemId);
  };

  return (
    <div>
      <input
        type="text"
        value={itemName}
        onChange={(e) => setItemName(e.target.value)}
        placeholder="Item Name"
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ZustandComponent;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ ZustandComponent จะติดตาม Zustand store และแสดงรายการของ items เมื่อมีการเพิ่มหรือลบ item คอมโพเนนต์จะ re-render โดยอัตโนมัติเพื่อแสดงการเปลี่ยนแปลงใน Zustand store

Server-Side Rendering (SSR) ด้วย experimental_useSyncExternalStore

เมื่อใช้ experimental_useSyncExternalStore ในแอปพลิเคชันที่ทำ Server-Side Rendering คุณต้องระบุฟังก์ชัน getServerSnapshot ฟังก์ชันนี้ช่วยให้ React สามารถรับ snapshot เริ่มต้นของข้อมูลระหว่างการทำ Server-Side Rendering หากไม่มีฟังก์ชันนี้ React จะโยน error เพราะไม่สามารถเข้าถึง external store บนเซิร์ฟเวอร์ได้

นี่คือวิธีการปรับปรุงตัวอย่างตัวนับอย่างง่ายของเราเพื่อรองรับ SSR:

            // counterStore.js (SSR-enabled)
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  getServerSnapshot: () => 0, // Provide an initial value for SSR
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

            

              
                Copy
              
            
          

ในเวอร์ชันที่แก้ไขนี้ เราได้เพิ่มฟังก์ชัน getServerSnapshot ซึ่งคืนค่าเริ่มต้นเป็น 0 สำหรับตัวนับ สิ่งนี้ทำให้มั่นใจได้ว่า HTML ที่ render ฝั่งเซิร์ฟเวอร์มีค่าที่ถูกต้องสำหรับตัวนับ และคอมโพเนนต์ฝั่งไคลเอ็นต์สามารถ hydrate จาก HTML ที่ render ฝั่งเซิร์ฟเวอร์ได้อย่างราบรื่น

สำหรับสถานการณ์ที่ซับซ้อนยิ่งขึ้น เช่น การจัดการข้อมูลที่ดึงมาจากฐานข้อมูล คุณจะต้องดึงข้อมูลบนเซิร์ฟเวอร์และส่งต่อเป็น snapshot เริ่มต้นใน getServerSnapshot

แนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณา

เมื่อใช้ experimental_useSyncExternalStore ควรคำนึงถึงแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

• ทำให้ getSnapshot เป็น Pure Function: ฟังก์ชัน getSnapshot ควรเป็น pure function ซึ่งหมายความว่าไม่ควรมี side effects ใดๆ ควรทำหน้าที่เพียงแค่คืนค่า snapshot ของข้อมูลโดยไม่แก้ไข external store
• ลดขนาดของ Snapshot: พยายามลดขนาดของ snapshot ที่คืนค่าโดย getSnapshot React จะเปรียบเทียบ snapshots เพื่อตรวจสอบว่าข้อมูลมีการเปลี่ยนแปลงหรือไม่ ดังนั้น snapshots ที่มีขนาดเล็กกว่าจะช่วยเพิ่มประสิทธิภาพ
• ปรับปรุง Logic การ Subscription: ตรวจสอบให้แน่ใจว่าฟังก์ชัน subscribe ติดตามการเปลี่ยนแปลงใน external store อย่างมีประสิทธิภาพ หลีกเลี่ยงการ subscription ที่ไม่จำเป็นหรือ logic ที่ซับซ้อนซึ่งอาจทำให้แอปพลิเคชันช้าลง
• จัดการข้อผิดพลาดอย่างเหมาะสม: เตรียมพร้อมรับมือกับข้อผิดพลาดที่อาจเกิดขึ้นเมื่อเข้าถึง external store โดยเฉพาะในสภาพแวดล้อมเช่น localStorage ที่อาจมีโควต้าพื้นที่เก็บข้อมูลเกิน
• พิจารณาการใช้ Memoization: ในกรณีที่ snapshot ต้องใช้การคำนวณที่หนักหน่วง ให้พิจารณาใช้ memoization กับผลลัพธ์ของ getSnapshot เพื่อหลีกเลี่ยงการคำนวณซ้ำซ้อน ไลบรารีอย่าง useMemo อาจเป็นประโยชน์
• ระวัง Concurrent Mode: ตรวจสอบให้แน่ใจว่า external store ของคุณเข้ากันได้กับคุณสมบัติ Concurrent Rendering ของ React Concurrent Mode อาจเรียก getSnapshot หลายครั้งก่อนที่จะ commit การ render

ข้อควรพิจารณาในระดับสากล

เมื่อพัฒนาแอปพลิเคชัน React สำหรับผู้ใช้ทั่วโลก ควรพิจารณาประเด็นต่อไปนี้เมื่อทำงานร่วมกับ external store:

• เขตเวลา (Time Zones): หาก external store ของคุณจัดการวันที่หรือเวลา ตรวจสอบให้แน่ใจว่าคุณจัดการเขตเวลาอย่างถูกต้องเพื่อหลีกเลี่ยงความไม่สอดคล้องกันสำหรับผู้ใช้ในภูมิภาคต่างๆ ใช้ไลบรารีอย่าง date-fns-tz หรือ moment-timezone เพื่อจัดการเขตเวลา
• การแปลภาษา (Localization): หาก external store ของคุณมีข้อความหรือเนื้อหาอื่นๆ ที่ต้องแปลเป็นภาษาท้องถิ่น ให้ใช้ไลบรารีการแปลภาษาอย่าง i18next หรือ react-intl เพื่อให้เนื้อหาที่แปลแล้วแก่ผู้ใช้ตามภาษาที่พวกเขาต้องการ
• สกุลเงิน (Currency): หาก external store ของคุณจัดการข้อมูลทางการเงิน ตรวจสอบให้แน่ใจว่าคุณจัดการสกุลเงินอย่างถูกต้องและจัดรูปแบบให้เหมาะสมกับแต่ละท้องถิ่น ใช้ไลบรารีอย่าง currency.js หรือ accounting.js เพื่อจัดการสกุลเงิน
• ความเป็นส่วนตัวของข้อมูล (Data Privacy): คำนึงถึงกฎระเบียบด้านความเป็นส่วนตัวของข้อมูล เช่น GDPR เมื่อจัดเก็บข้อมูลผู้ใช้ใน external store อย่าง localStorage หรือ sessionStorage ขอความยินยอมจากผู้ใช้ก่อนจัดเก็บข้อมูลที่ละเอียดอ่อน และจัดให้มีกลไกสำหรับผู้ใช้ในการเข้าถึงและลบข้อมูลของตนเอง

ทางเลือกอื่นนอกเหนือจาก experimental_useSyncExternalStore

แม้ว่า experimental_useSyncExternalStore จะเป็นเครื่องมือที่ทรงพลัง แต่ก็มีแนวทางอื่นในการซิงโครไนซ์คอมโพเนนต์ React กับ external store:

• Context API: Context API ของ React สามารถใช้เพื่อส่งข้อมูลจาก external store ไปยัง component tree ได้ อย่างไรก็ตาม Context API อาจไม่มีประสิทธิภาพเท่า experimental_useSyncExternalStore สำหรับแอปพลิเคชันขนาดใหญ่ที่มีการอัปเดตบ่อยครั้ง
• Render Props: Render props สามารถใช้เพื่อติดตามการเปลี่ยนแปลงใน external store และส่งข้อมูลไปยัง child component ได้ อย่างไรก็ตาม render props อาจนำไปสู่ลำดับชั้นของคอมโพเนนต์ที่ซับซ้อนและโค้ดที่ดูแลรักษายาก
• Custom Hooks: คุณสามารถสร้าง custom hooks เพื่อจัดการการติดตาม external store ได้ อย่างไรก็ตาม แนวทางนี้ต้องการความใส่ใจอย่างรอบคอบในการเพิ่มประสิทธิภาพและการจัดการข้อผิดพลาด

การเลือกใช้แนวทางใดขึ้นอยู่กับความต้องการเฉพาะของแอปพลิเคชันของคุณ experimental_useSyncExternalStore มักเป็นตัวเลือกที่ดีที่สุดสำหรับแอปพลิเคชันที่ซับซ้อน มีการอัปเดตบ่อยครั้ง และต้องการประสิทธิภาพสูง

สรุป

experimental_useSyncExternalStore เป็นวิธีการที่ทรงพลังและมีประสิทธิภาพในการซิงโครไนซ์คอมโพเนนต์ React กับแหล่งข้อมูลภายนอก ด้วยการทำความเข้าใจแนวคิดหลัก ตัวอย่างการใช้งานจริง และแนวทางปฏิบัติที่ดีที่สุด นักพัฒนาสามารถสร้างแอปพลิเคชัน React ที่มีประสิทธิภาพสูง ซึ่งทำงานร่วมกับระบบจัดการข้อมูลภายนอกต่างๆ ได้อย่างราบรื่น ในขณะที่ React ยังคงพัฒนาต่อไป experimental_useSyncExternalStore มีแนวโน้มที่จะกลายเป็นเครื่องมือที่สำคัญยิ่งขึ้นสำหรับการสร้างแอปพลิเคชันที่ซับซ้อนและขยายขนาดได้สำหรับผู้ใช้ทั่วโลก อย่าลืมพิจารณาสถานะการทดลองและการเปลี่ยนแปลง API ที่อาจเกิดขึ้นอย่างรอบคอบเมื่อนำไปใช้ในโปรเจกต์ของคุณ และควรศึกษาเอกสารอย่างเป็นทางการของ React เสมอเพื่อรับข้อมูลอัปเดตและคำแนะนำล่าสุด